<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<jsp:include page="/WEB-INF/jsp/head.jsp"/>
	
	<script>
		$(function() {
			$("#divTitle").html("Relatório de Classes de Equivalência");
			$( "#dataInicial" ).datepicker();
			$( "#dataFinal" ).datepicker();
			
			if( $('#pais :selected').text() != "" ){
				atualizarEstado($('#pais :selected').text());
			}
		});

		function atualizarEstado(pais){		
			$('#estado').html("<option selected='selected'></select>");
			$('#cidade').html("<option selected='selected'></select>");

			$.getJSON("localidade?localidade-searchby=localidade_state&q="+ pais, 
				function(data) {
				  $.each(data.data, function(key, val) {
					  $('#estado').append('<option value='+val.localidade_state+">"+ val.localidade_state +"</option>");
				  });
			});
		}

		function atualizarCidade(estadoOption){		
			$('#cidade').html("<option selected='selected'></select>");

			$.getJSON("localidade?localidade-searchby=localidade_city&q="+ estadoOption.value, 
				function(data) {
				  $.each(data.data, function(key, val) {
					  $('#cidade').append('<option value='+val.localidade_city+">"+ val.localidade_city +"</option>");
				  });
			});
		}
		
	</script>
</head>
<body>

	<jsp:include page="/WEB-INF/jsp/cabecalhoScaf.jsp"/>

 	<form method="POST" >
		 
		<c:if test="${not empty erro}">
			<br/>
			<div style="border-style:solid;border-width:2px;border-color: red; padding: 10px;">
				* ${erro}
			</div>
			<br/>
		</c:if> 
		
		 <div class="linha"  >
		 	<div class="coluna1">
		 		<label>Data Inicial:</label>
		 	</div>
		 	<div class="coluna2">
		 		<input type="text" name="dataInicial" id="dataInicial" readonly="true" class="field2"/>
		 	</div>
		 	<div class="coluna1">
		 		<label>Data Final:</label>
		 	</div>
		 	<div class="coluna2">
		 		<input type="text" name="dataFinal" id="dataFinal" readonly="true" class="field2"/>
		 	</div>
		 </div>

		 <div class="linha">
		 	<div class="coluna1">
		 		<label>Tipo de Transação:</label>
		 	</div>
		 	<div class="coluna2">
		 		<select name="tipoTransacao" class="field2">
		 			<option></option>
		 			<c:forEach items="${tiposTransacao}" var="tipo" >
			 			<option>${tipo}</option>
		 			</c:forEach>
		 		</select>
		 	</div>
		 </div>

		 <div class="linha">
		 	<div class="coluna1">
		 		<label>Classe de Equivalência:</label>
		 	</div>
		 	<div class="coluna2">
		 		<select name="tipo" class="field2">
		 			<option></option>
		 			<c:forEach items="${tipos}" var="tipo" >
			 			<option>${tipo}</option>
		 			</c:forEach>
		 		</select>
		 	</div>
		 </div>

		 <div class="linha">
		 	<div class="coluna1">
		 		<label>País:</label>
		 	</div>
		 	<div class="coluna2">
		 		<select onchange="atualizarEstado(this.value)" name="pais" id="pais" class="field2">
		 			<option></option>
		 			<c:forEach items="${paises}" var="pais" >
			 			<option>${pais}</option>
		 			</c:forEach>
		 		</select>
		 	</div>
		 </div>

		 <div class="linha">
		 	<div class="coluna1" class="field2">
		 		<label>Estado:</label>
		 	</div>
		 	<div class="coluna2">
		 		<select name="estado" onchange="atualizarCidade(this)" id="estado" class="field2"></select>
		 	</div>
		 </div>

		 <div class="linha">
		 	<div class="coluna1">
		 		<label>Cidade:</label>
		 	</div>
		 	<div class="coluna2">
		 		<select name="cidade" id="cidade" class="field2"></select>
		 	</div>
		 </div>
		
		<div class="linha">
			<input type="submit" value="Gerar Relatório">
		</div>
 	</form>

</body>
</html>